const path = require('path')
//这是热更新的第2步
const webpack = require('webpack')
// 导入在内存中生成 HTML 页面的 插件
// 只要是插件，都一定要 放到 plugins 节点中去
// 这个插件的两个作用：
// 1. 自动在内存中根据指定页面生成一个内存的页面
// 2. 自动，把打包好的 bundle.js 追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')


// 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建
module.exports = {
   entry: path.join(__dirname, './src/main.js'), // 入口，要使用 webpack 打包那个文件
   output: { // 指定输出选项
    path: path.join(__dirname, './dist'), // 输出路径
    filename: 'bundle.js' // 指定输出文件的名称
  },
  devServer: { //这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
    // --open --port 3000 --contentBase src --hot
    open: true, // 自动打开浏览器
    port: 3000, //设置启动时候的运行端口
    contentBase: 'src', //指定托管的根目录
    hot: true // 启用热更新 的 第1步

  },
  plugins: [ // 配置插件的节点
    new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象，这是启动热更新的第 3 步
    new htmlWebpackPlugin({  // 创建一个 在内存中 生成 HTML 页面的插件
        template: path.join(__dirname, './src/index.html'),//指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面
        filename: 'index.html' //指定生成的页面的名称
    })
  ],
  module: { // 这个节点，用于配置 所有 第三方模块 加载器
    rules: [ // 所有第三方模块的 匹配规则
      { test: /\.css$/, use: ['style-loader','css-loader'] },// 配置处理 .css文件的第三方loader 规则,
      //注意这里 style-loader和 css-loader顺序不能变，从右到左，从后到前
      { test: /\.less$/, use: ['style-loader','css-loader','less-loader'] },//配置处理，less 文件的第三方 loader 规则
      { test: /\.scss$/, use: ['style-loader','css-loader','sass-loader'] },//配置处理 .scss 文件的 第三方 loader 规则
    ]
  }

}

// 当我们在 控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：
// 1.首先，webpack 发现, 我们并没有通过命令的形式，给它指定入口和出口
// 2.webpack 就会去项目 根目录下，查找一个叫 `webpack.config.js` 的配置文件
// 3.当找到配置文件后，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了 配置文件中，导出的配置对象
// 4.当 webpack 拿到 配置对象后，就拿到了 配置对象中指定的 入口 和 出口，然后进行打包、构建



// 注意: webpack 处理第三方文件类型的过程:
// 1. 发现这个 要处理的文件不是JS文件，然后就去 配置文件中，查找有没有对应的第三方 loader 规则
// 2. 如果能找到对应的规则，就会调用 对应的 loader 处理 这种文件类型；
// 3. 在调用loader 的时候，是从后往前调用的；
// 4. 当之后一个 loader 调用完毕，会把处理的结果，直接交给 webpack 进行 打包合并，最终输出到bundle.js 中去